<template>
  <div class="frame" style="padding: 0">
    <div class="bg_img">
      <div class="first_words">
        <p style="margin: 0;padding: 0">
          在当今数字时代，理解和分析数据已成为推动科学研究和技术进步的核心。核心页面将提供一个系统性的框架，帮助用户全面了解与数据相关的学术贡献，包括认知神经科学、神经网络机制、数据特点与规律，以及大模型的内容生成。通过这些要素化的介绍，用户能够获得深入的知识，支持其在相关领域的研究与应用。
        </p>
      </div>
    </div>
    <div class="second_words" style="display: flex">
      <div class="container1">
        <div class="padding1"></div>
        <div class="list-section">
          <h1>认知神经科学</h1>
          <p>认知神经科学是研究大脑如何支持认知功能（如思维、记忆、语言和感知）的学科。它结合了心理学、神经科学、计算机科学和哲学等多个领域，旨在揭示人类智能的生物基础。</p>
          <h2>论文成果</h2>
          <ul>
            <li
              v-for="(item, index) in paginatedList1"
              :key="index"
              @mouseover="changeImage1(item.imageUrl)"
            >
              {{ item.name }}
            </li>
          </ul>

          <div class="pagination">
            <button @click="prevPage1" :disabled="currentPage1 === 1">上一页</button>
            <span>页面 {{ currentPage1 }} / {{ totalPages1 }}</span>
            <button @click="nextPage1" :disabled="currentPage1 === totalPages1">下一页</button>
          </div>
        </div>
        <div class="image-container">
          <div class="image-section2">
            <img :src="currentImage1" alt="展示图片" />
          </div>
        </div>
      </div>
    </div>
    <div class="third_words" style="display: flex">
      <div class="container1">
        <div class="padding1"></div>
        <div class="list-section">
          <h1>基于神经网络的机制</h1>
          <p>基于神经网络的机制指的是通过模拟大脑神经元的连接和功能来构建计算模型。这些模型在图像识别、自然语言处理和强化学习等领域展现出了强大的性能。</p>
          <h2>论文成果</h2>
          <ul>
            <li
              v-for="(item, index) in paginatedList2"
              :key="index"
              @mouseover="changeImage2(item.imageUrl)"
            >
              {{ item.name }}
            </li>
          </ul>

          <div class="pagination">
            <button @click="prevPage2" :disabled="currentPage2 === 1">上一页</button>
            <span>页面 {{ currentPage2 }} / {{ totalPages2 }}</span>
            <button @click="nextPage2" :disabled="currentPage2 === totalPages2">下一页</button>
          </div>
        </div>
        <div class="image-container">
          <div class="image-section2">
            <img :src="currentImage2" alt="展示图片" />
          </div>
        </div>
      </div>
    </div>
    <div class="fourth_words" style="display: flex">
      <div class="container1">
        <div class="padding1"></div>
        <div class="list-section">
          <h1>数据特点和规律</h1>
          <p>数据特点和规律是指在数据集中可以识别的模式、趋势和特征。这些特点帮助研究人员进行数据分析，挖掘有价值的信息，进而支持决策和预测。</p>
          <h2>论文成果</h2>
          <ul>
            <li
              v-for="(item, index) in paginatedList3"
              :key="index"
              @mouseover="changeImage3(item.imageUrl)"
            >
              {{ item.name }}
            </li>
          </ul>

          <div class="pagination">
            <button @click="prevPage3" :disabled="currentPage3 === 1">上一页</button>
            <span>页面 {{ currentPage3 }} / {{ totalPages3 }}</span>
            <button @click="nextPage3" :disabled="currentPage3 === totalPages3">下一页</button>
          </div>
        </div>
        <div class="image-container">
          <div class="image-section2">
            <img :src="currentImage3" alt="展示图片" />
          </div>
        </div>
      </div>
    </div>
    <div class="fifth_words" style="display: flex">
      <div class="container1">
        <div class="padding1"></div>
        <div class="list-section">
          <h1>基于大模型的内容生成</h1>
          <p>基于大模型的内容生成利用深度学习模型（如GPT-3）生成自然语言文本、图像或音频内容。这种技术在创作、营销和个性化推荐等领域得到了广泛应用。</p>
          <h2>论文成果</h2>
          <ul>
            <li
              v-for="(item, index) in paginatedList4"
              :key="index"
              @mouseover="changeImage4(item.imageUrl)"
            >
              {{ item.name }}
            </li>
          </ul>

          <div class="pagination">
            <button @click="prevPage4" :disabled="currentPage4 === 1">上一页</button>
            <span>页面 {{ currentPage4 }} / {{ totalPages4 }}</span>
            <button @click="nextPage4" :disabled="currentPage4 === totalPages4">下一页</button>
          </div>
        </div>
        <div class="image-container">
          <div class="image-section2">
            <img :src="currentImage4" alt="展示图片" />
          </div>
        </div>
      </div>
    </div>
    <div class="sixth_words">
      <div style="width: 500px;height: 100px;padding: 50px 0 0 100px">
        <p>贵州大学</p>
        <p>计算机科学与技术学院</p>
        <p>陈艳平 教授</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "coreTechnology",
  data() {
    return {
      second_articaList: [
        { name: '认知神经科学论文1', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '认知神经科学论文2', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '认知神经科学论文3', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '认知神经科学论文4', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '认知神经科学论文5', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '认知神经科学论文6', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '认知神经科学论文7', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '认知神经科学论文8', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '认知神经科学论文9', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '认知神经科学论文10', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },

        // 添加更多论文
      ],
      third_articaList: [
        { name: '神经网络机制论文1', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '神经网络机制论文2', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '神经网络机制论文3', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '神经网络机制论文4', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '神经网络机制论文5', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '神经网络机制论文6', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '神经网络机制论文7', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '神经网络机制论文8', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '神经网络机制论文9', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '神经网络机制论文10', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        // 添加更多论文
      ],
      fourth_articaList: [
        { name: '数据特点论文1', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '数据特点论文2', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '数据特点论文3', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '数据特点论文4', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '数据特点论文5', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '数据特点论文6', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '数据特点论文7', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '数据特点论文8', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '数据特点论文9', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '数据特点论文10', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        // 添加更多论文
      ],
      fifth_articaList: [
        { name: '大模型内容生成论文1', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '大模型内容生成论文2', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '大模型内容生成论文3', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '大模型内容生成论文4', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '大模型内容生成论文5', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '大模型内容生成论文6', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '大模型内容生成论文7', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '大模型内容生成论文8', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        { name: '大模型内容生成论文9', imageUrl: require('@/assets/images/coreTechnology_img/论文1.png') },
        { name: '大模型内容生成论文10', imageUrl: require('@/assets/images/coreTechnology_img/论文2.png') },
        // 添加更多论文
      ],
      currentImage1: require('@/assets/images/coreTechnology_img/论文1.png'),
      currentImage2: require('@/assets/images/coreTechnology_img/论文1.png'),
      currentImage3: require('@/assets/images/coreTechnology_img/论文1.png'),
      currentImage4: require('@/assets/images/coreTechnology_img/论文1.png'),
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage4: 1,
      pageSize1: 5
    };
  },
  computed: {
    paginatedList1() {
      return this.paginate(this.second_articaList, this.currentPage1);
    },
    paginatedList2() {
      return this.paginate(this.third_articaList, this.currentPage2);
    },
    paginatedList3() {
      return this.paginate(this.fourth_articaList, this.currentPage3);
    },
    paginatedList4() {
      return this.paginate(this.fifth_articaList, this.currentPage4);
    },
    totalPages1() {
      return Math.ceil(this.second_articaList.length / this.pageSize1);
    },
    totalPages2() {
      return Math.ceil(this.third_articaList.length / this.pageSize1);
    },
    totalPages3() {
      return Math.ceil(this.fourth_articaList.length / this.pageSize1);
    },
    totalPages4() {
      return Math.ceil(this.fifth_articaList.length / this.pageSize1);
    }
  },
  methods: {
    changeImage1(newImage) {
      this.currentImage1 = newImage;
    },
    changeImage2(newImage) {
      this.currentImage2 = newImage;
    },
    changeImage3(newImage) {
      this.currentImage3 = newImage;
    },
    changeImage4(newImage) {
      this.currentImage4 = newImage;
    },
    nextPage1() {
      if (this.currentPage1 < this.totalPages1) {
        this.currentPage1++;
      }
    },
    prevPage1() {
      if (this.currentPage1 > 1) {
        this.currentPage1--;
      }
    },
    nextPage2() {
      if (this.currentPage2 < this.totalPages2) {
        this.currentPage2++;
      }
    },
    prevPage2() {
      if (this.currentPage2 > 1) {
        this.currentPage2--;
      }
    },
    nextPage3() {
      if (this.currentPage3 < this.totalPages3) {
        this.currentPage3++;
      }
    },
    prevPage3() {
      if (this.currentPage3 > 1) {
        this.currentPage3--;
      }
    },
    nextPage4() {
      if (this.currentPage4 < this.totalPages4) {
        this.currentPage4++;
      }
    },
    prevPage4() {
      if (this.currentPage4 > 1) {
        this.currentPage4--;
      }
    },
    paginate(list, currentPage) {
      const startIndex = (currentPage - 1) * this.pageSize1;
      const endIndex = startIndex + this.pageSize1;
      return list.slice(startIndex, endIndex);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.bg_img {
  background: url('../../assets/images/coreTechnology_img/picture1.png') no-repeat center center;
  background-size: cover;
  height: 520px;
}

.padding1 {
  width: 10%;
}

.first_words {
  width: 900px;
  height: 400px;
  padding: 120px 0 0 100px;
  font-family: 'PingFang SC', sans-serif;
  font-size: 30px;
}

.second_words, .fourth_words {
  height: 600px;
  background-color: #E8ECF1;
}

.third_words, .fifth_words {
  height: 600px;
  background-color: #D5E0EF;
}

.sixth_words {
  height: 200px;
  background-color: #6484E5;
}

.container1 {
  display: flex;
  justify-content: space-between;
  //background-color: #E8ECF1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 600px;
  width: 100%; /* 确保占满可用宽度 */
}

.list-section {
  flex: 1;
  margin-right: 20px;
}

.list-section h1 {
  font-size: 36px;
  font-weight: bold;
  padding: 5px 0 0 30px;
}

.list-section p {
  font-size: 20px;
  color: #666;
  line-height: 1.6;
}

.list-section ul {
  list-style: none;
  padding: 0;
}

.list-section li {
  padding: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.list-section li:hover {
  background-color: #f0f0f0;
}

.image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-section2 {
  display: grid;
  place-items: center;
  width: 100%; /* 确保图片不会超出容器 */
  max-width: 700px; /* 根据需要调整最大宽度 */
  height: auto; /* 保持宽高比 */
  border-radius: 8px;
}

.image-section2 img {
  width: 60%;
  border-radius: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #c0c0c0;
  cursor: not-allowed;
}
</style>
